<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@page import="com.dao.ItemsDAO"%>
<%@page import="com.po.*"%>
<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>产品信息——计算器</title>
    <meta name="robots" content="noindex, follow" />
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="assets/images/favicon.ico">
    <link rel="stylesheet" href="assets/css/vendor.min.css">
    <link rel="stylesheet" href="assets/css/plugins.min.css">
    <link rel="stylesheet" href="assets/css/style.min.css">
    <link rel="stylesheet" href="assets/css/animate.css">
	<link rel="stylesheet" href="assets/css/fontawesome.min.css">
	<!-- <link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-4.2.1.css"> -->
	<link rel="stylesheet" href="assets/css/metisMenu.css">
	<link rel="stylesheet" href="assets/css/swiper.min.css">
	<link rel="stylesheet" href="assets/css/magnific-popup.css">
	<link rel="stylesheet" href="assets/css/odometer.css">
	<link rel="stylesheet" href="assets/css/spacing.css">
	<link rel="stylesheet" href="assets/css/main.css">
	<link rel="stylesheet" href="assets/css/bootstrap.min.css">
</head>
<body>

    <!-- ========================
    Offcanvas Menu Area Start 
    ===========================-->
<header class="header-area header-style-3">
	<div class="header-top">
		<div class="container-fluid">
			<div class="row align-items-center">
				<div class="col-xl-3 col-lg-3 col-md-4 col-6">
					<div class="logo">
						<a href="index.jsp">
							<img src="assets/img/logo.png" alt="logo">
						</a>
					</div>
				</div>
				<div class="col-xl-6 d-none d-xl-block">
					<nav class="main-menu">
						<ul>
							<li class="">
								<a href="index.jsp">首页</a>
							</li>
							<li class="has-dropdown">
								<a href="#">商品目录</a>
								<ul class="sub-menu">
									<li><a href="#">学习用品</a></li>
									<li><a href="#">电子产品</a></li>
									<li><a href="#">其他产品</a></li>
								</ul>
							</li>
							<li class="has-dropdown">
								<a href="#">卖家中心</a>
								<ul class="sub-menu">
									<li><a href="#">注册开店</a></li>
									<li><a href="product-release.jsp">发布产品</a></li>
								</ul>
							</li>
							<li><a href="#">联系客服</a></li>
							<li><a href="login.jsp">用户中心</a></li>
						</ul>
					</nav>
				</div>
				<div class="col-xl-3 col-lg-9 col-md-8 col-6 d-flex justify-content-end align-items-center">
					<div class="header-search">
						<a href="javascript:void(0);"><i class="far fa-search"></i></a>
					</div>
					<div class="attr-menu-2">
						<ul>
							<li>
								<a href="login.jsp">
									<!-- <i class="far fa-heart"></i> -->
									<i class="fa fa-user-circle"></i>
								</a>
							</li>
							<li>
								<a href="shopcart.jsp">
									<i class="far fa-shopping-cart"></i>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
</header>

<section class="breadcrumb-area pt-40 pb-40" style="background-color:rgb(253, 242, 224) ;">
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-lg-8 text-center">
					<div class="breadcrumb-content">
						<h3 class="title">产品信息</h3>
						<ul>
							<li><a href="#">ProductInformation</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
</section>
    <!--=====================
    Breadcrumb Aera End
    =========================-->

    <!-- ========================
    Product Details Area Start 
    ===========================-->
    <div class="product-area product-details-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-5 col-12 mt-50">
                    <!-- Product Zoom Image start -->
                    <div class="product-slider-container arrow-center text-center">
                        <div class="product-item">
                            <a href="assets\img\470\electronic products\calculator.jpg"><img src="assets\img\470\electronic products\calculator.jpg" class="img-fluid" alt="" /></a>
                        </div>
                        <div class="product-item">
                            <a href="assets\img\470\electronic products\calculator.jpg"><img src="assets\img\470\electronic products\calculator.jpg" class="img-fluid" alt="" /></a>
                        </div>
                        <div class="product-item">
                            <a href="assets\img\470\electronic products\calculator.jpg"><img src="assets\img\470\electronic products\calculator.jpg" class="img-fluid" alt="" /></a>
                        </div>
                        <div class="product-item">
                            <a href="assets\img\470\electronic products\calculator.jpg"><img src="assets\img\470\electronic products\calculator.jpg" class="img-fluid" alt="" /></a>
                        </div>
                        <div class="product-item">
                            <a href="assets\img\470\electronic products\calculator.jpg"><img src="assets\img\470\electronic products\calculator.jpg" class="img-fluid" alt="" /></a>
                        </div>
                        <div class="product-item">
                            <a href="assets\img\470\electronic products\calculator.jpg"><img src="assets\img\470\electronic products\calculator.jpg" class="img-fluid" alt="" /></a>
                        </div>
                        <div class="product-item">
                            <a href="assets\img\470\electronic products\calculator.jpg"><img src="assets\img\470\electronic products\calculator.jpg" class="img-fluid" alt="" /></a>
                        </div>
                        <div class="product-item">
                            <a href="assets\img\470\electronic products\calculator.jpg"><img src="assets\img\470\electronic products\calculator.jpg" class="img-fluid" alt="" /></a>
                        </div>
                    </div>
                    <!-- Product Zoom Image End -->
                    <!-- Product Thumb Zoom Image Start -->
                    <div class="product-details-thumbnail arrow-center text-center">
                        <div class="product-item-thumb">
                            <img src="assets\img\470\electronic products\calculator.jpg" class="img-fluid" alt="" />
                        </div>
                        <div class="product-item-thumb">
                            <img src="assets\img\470\electronic products\calculator.jpg" class="img-fluid" alt="" />
                        </div>
                        <div class="product-item-thumb">
                            <img src="assets\img\470\electronic products\calculator.jpg" class="img-fluid" alt="" />
                        </div>
                        <div class="product-item-thumb">
                            <img src="assets\img\470\electronic products\calculator.jpg" class="img-fluid" alt="" />
                        </div>
                        <div class="product-item-thumb">
                            <img src="assets\img\470\electronic products\calculator.jpg" class="img-fluid" alt="" />
                        </div>
                        <div class="product-item-thumb">
                            <img src="assets\img\470\electronic products\calculator.jpg" class="img-fluid" alt="" />
                        </div>
                        <div class="product-item-thumb">
                            <img src="assets\img\470\electronic products\calculator.jpg" class="img-fluid" alt="" />
                        </div>
                        <div class="product-item-thumb">
                            <img src="assets\img\470\electronic products\calculator.jpg" class="img-fluid" alt="" />
                        </div>
                    </div>
                </div>
                <div class="col-lg-7 col-12 mt-45">
                    <!-- Product Summery Start -->
                    <div class="product-summery position-relative">
                        <div class="product-head">
                            <h1 class="product-title">计算器</h1>
                            <div class="product-arrows text-right">
                                <a href="#"><i class="fa fa-long-arrow-left"></i></a>
                                <a href="#"><i class="fa fa-long-arrow-right"></i></a>
                            </div>
                        </div>
                        <div class="rating-meta d-flex">
                            <div class="rating">
                                <span class="yellow"><i class="fa fa-star"></i></span>
                                <span class="yellow"><i class="fa fa-star"></i></span>
                                <span class="yellow"><i class="fa fa-star"></i></span>
                                <span class="yellow"><i class="fa fa-star"></i></span>
                                <span class="yellow"><i class="fa fa-star"></i></span>
                            </div>
                            <ul class="meta d-flex">
                                <li>
                                    <a href="#"><i class="fa fa-commenting-o"></i>读留言</a>
                                </li>
                                <li>
                                    <a href="#"><i class="fa fa-edit"></i>留言板</a>
                                </li>
                            </ul>
                        </div>
                        <div class="price-box">
                            <span class="regular-price">￥8.00</span>
                        </div>
                        <div class="product-description">
                            <p>240种算法学生计算器，八成新。大屏显示，商务办公，编程科学，金融理财都可以的多功能计算器。限时特价，全网低价，性价比高，下单送电池！</p>
                        </div>
                        <div class="product-packeges">
                            <table>
                                <tbody>
                                    <tr>
                                        <td class="label"><span>尺寸</span></td>
                                        <td class="value">
                                            <div class="product-sizes">
                                                <a href="#">大</a>
                                                <a href="#">中</a>
                                                <a href="#">小</a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="label"><span>颜色</span></td>
                                        <td class="value">
                                            <div class="product-colors">
                                                <a href="#" data-bg-color="#000000" style="background-color: rgb(8, 46, 84);"></a>
                                                <a href="#" data-bg-color="#ffffff" style="background-color: rgb(237, 145, 33);"></a>
                                                 <a href="#" data-bg-color="#ffffff" style="background-color: rgb(192, 192, 192);"></a>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="label"><span>数量</span></td>
                                        <td class="value">
                                            <div class="product-quantity">
                                                <span class="qty-btn minus"><i class="fa fa-angle-down"></i></span>
                                                <input type="text" class="input-qty" value="1">
                                                <span class="qty-btn plus"><i class="fa fa-angle-up"></i></span>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="product-buttons grid_list">
                            <form action="CartServlet" method="POST">
                        		<div class="action-link">
                                	<button class="btn-secondary" type="submit" style="background:rgb(204, 58, 58);width:150px">加入购物车</button>
                            	</div>
                        	</form>
                        </div>
                    </div>
                    <!-- Product Summery End -->
                </div>
            </div>
            <div class="row mt-40">
                <div class="col-lg-3 col-sm-3 col-md-2">
                    <!-- Product Description Tab Start -->
                    <div class="product-desc-tab">
                        <ul class="nav flex-column" role="tablist">
                            <li><a class="active" href="#description" role="tab" data-toggle="tab" aria-selected="false">说明书</a></li>
                            <li><a href="#sheet" role="tab" data-toggle="tab" aria-selected="false">数据表</a></li>
                            <li><a href="#reviews" role="tab" data-toggle="tab" aria-selected="true">评论</a></li>
                        </ul>
                    </div>
                    <!-- Product Description Tab End -->
                </div>
                <div class="col-lg-9 col-sm-9 col-md-10">
                    <div class="product-desc-tab-content">
                        <!-- Start Single Content -->
                        <div role="tabpanel" id="description" class="product_tab_content fade active show">
                            <div class="product_description_wrap mt-20">
                                <div class="product_desc">
                                    <h2 class="last-title mb-20">细节</h2>
                                    <p>240种算法学生计算器，八成新。大屏显示，商务办公，编程科学，金融理财都可以的多功能计算器。限时特价，全网低价，性价比高，下单送电池！</p>
                                </div>

                        <!-- End Single Content -->
                        <!-- Start Single Content -->
                        <div role="tabpanel" id="reviews" class="product_tab_content fade">
                            <div class="review_address_inner mt-20">
                                <!-- Start Single Review -->
                                <div class="pro_review">
                                    <div class="review_thumb">
                                        <img src="assets/images/blog/comment/comment-3.jpg" alt="review images">
                                    </div>
                                    <div class="review_details">
                                        <div class="review_info">
                                            <a class="last-title" href="#">Gerald Barnes</a>
                                            <div class="rating">
                                                <span class="yellow"><i class="fa fa-star"></i></span>
                                                <span class="yellow"><i class="fa fa-star"></i></span>
                                                <span class="yellow"><i class="fa fa-star"></i></span>
                                                <span class="yellow"><i class="fa fa-star"></i></span>
                                                <span class="yellow"><i class="fa fa-star"></i></span>
                                            </div>
                                            <div class="rating_send">
                                                <a href="#"><i class="zmdi zmdi-mail-reply"></i></a>
                                                <a href="#"><i class="zmdi zmdi-close"></i></a>
                                            </div>
                                        </div>
                                        <div class="review_date">
                                            <span>27 Jun, 2016 at 2:30pm</span>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan egestas elese ifend. Phasellus a felis at estei to bibendum feugiat ut eget eni Praesent et messages in con sectetur posuere dolor non.</p>
                                    </div>
                                </div>
                                <!-- End Single Review -->
                                <!-- Start Single Review -->
                                <div class="pro_review pro-second">
                                    <div class="review_thumb">
                                        <img src="assets/images/blog/comment/comment-3.jpg" alt="review images">
                                    </div>
                                    <div class="review_details">
                                        <div class="review_info">
                                            <a class="last-title" href="#">Gerald Barnes</a>
                                            <div class="rating">
                                                <span class="yellow"><i class="fa fa-star"></i></span>
                                                <span class="yellow"><i class="fa fa-star"></i></span>
                                                <span class="yellow"><i class="fa fa-star"></i></span>
                                                <span class="yellow"><i class="fa fa-star"></i></span>
                                                <span class="yellow"><i class="fa fa-star"></i></span>
                                            </div>
                                            <div class="rating_send">
                                                <a href="#"><i class="zmdi zmdi-mail-reply"></i></a>
                                                <a href="#"><i class="zmdi zmdi-close"></i></a>
                                            </div>
                                        </div>
                                        <div class="review_date">
                                            <span>27 Jun, 2016 at 2:30pm</span>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer accumsan egestas elese ifend. Phasellus a felis at estei to bibendum feugiat ut eget eni Praesent et messages in con sectetur posuere dolor non.</p>
                                    </div>
                                </div>
                                <!-- End Single Review -->
                            </div>
                            <!-- Start RAting Area -->
                            <div class="rating_wrap mt-20">
                                <h4 class="last-title">Your Rating</h4>
                                <div class="rating_list mt-20">
                                    <!-- Start Single List -->
                                    <div class="rating">
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                    </div>
                                    <div class="rating">
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                        <span class="yellow"><i class="fa fa-star"></i></span>
                                    </div>
                                    <!-- End Single List -->
                                </div>
                            </div>
                            <!-- End RAting Area -->
                            <div class="comments_form">
                                <h3>Leave a Reply </h3>
                                <p>Your email address will not be published. Required fields are marked *</p>
                                <form action="#">
                                    <div class="row">
                                        <div class="col-12">
                                            <label for="review_comment">Comment </label>
                                            <textarea name="comment" id="review_comment" spellcheck="false" data-gramm="false"></textarea>
                                        </div>
                                        <div class="col-lg-6 col-md-6">
                                            <label for="author">Name</label>
                                            <input id="author" type="text">

                                        </div>
                                        <div class="col-lg-6 col-md-6">
                                            <label for="email">Email </label>
                                            <input id="email" type="text">
                                        </div>
                                    </div>
                                    <button class="button" type="submit">Post Comment</button>
                                </form>
                            </div>
                        </div>
                        <!-- End Single Content -->
                    </div>
                </div>
            </div>
            <footer class="footer-area footer-style-3">
                <div class="footer-bottom">
                    <div class="container">
                        <div class="row footer-border pt-20 pb-20">
                            <div class="col-xl-6 col-lg-6 mb-md-10 mb-xs-10">
                                <div class="copyright">
                                    ©2020桂工咸鸭转转团队 reserved.
                                </div>
                            </div>
                            <div class="col-xl-6 col-lg-6">
                                <div class="footer-menu">
                                    <ul>
                                        <li><a href="index.html">首页</a></li>
                                        <li><a href="about.html">关于</a></li>
                                        <li><a href="faq.html">疑问</a></li>
                                        <li><a href="contact.html">联系我们</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
    <script src="assets/js/vendor.min.js"></script>
    <script src="assets/js/plugins.min.js"></script>

    <script src="assets/js/main.js"></script>

</body>

</html>